<template>
  <div>
    <!-- 员工数据看板-销售额 -->
    <div class="staffData" id="staffData" ref='staffData'></div>
  </div>
</template>

<script>
/**
 *       saleseTwo: { // 销售额 员工
 *         config: {
 *           dataList: [500000, 400000, 300000, 200000, 100000, 1],
 *           dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 *         },
 *         dataList: [
 *           {
 *             color: '#2d7cdf',
 *             name: '天兰',
 *             list: [98666, 150000, 129633, 255555, 366666, 433333, 120000, 88888, 98666, 246666,153333, 246666]
 *           },
 *           {
 *             color: '#16d7ca',
 *             name: '健驰',
 *             list: [150000, 366666, 433333, 366666, 98666, 246666, 433333, 255555, 255555, 366666, 120000, 88888]
 *           }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'

export default {
  name: 'comparison',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList (val) {
      // this.barGraph(this.documentId)
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.handlerStaffData()
      const documentId = this.documentId
      if (documentId) {
        // this.barGraph(documentId)
        // this.mycharts()
      }
    })
  },
  created () {
  },
  methods: {
    // 员工数据看板-销售额
    handlerStaffData () {

      const config = this.config
      const dataListTemp = [...this.dataList]
      const colorArr = []
      const legendName = []
      const seriesArr = []
      dataListTemp.forEach((item, index) => {
        colorArr.push(item.color)
        legendName.push(item.name)
        const seriesObj = {
          name: item.name,
          type: 'bar',
          barWidth: '10%',
          emphasis: { focus: 'series' },
          data: item.list,
          barGap: 0, // 俩根柱子之间不需要间距
          itemStyle: { normal: { barBorderRadius: [3, 3, 0, 0] } }// 设置柱子是否圆角
        }
        seriesArr.push(seriesObj)
      })

      var staffData = this.$echarts.init(document.getElementById('staffData'))
      staffData.setOption({
        tooltip: {
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          textStyle: { color: '#333333' },// 设置文字颜色
          backgroundColor: '#ffffff' // 设置背景颜色
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        legend: {
          icon: 'rect', // 形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 24, // 按钮设置间距
          data: legendName,
          textStyle: {
            // 文字样式
            color: '#999999',
            fontSize: '12'
          }
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: config.dateList,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              interval: 0,
              textStyle: {
                color: '#999999',
                fontSize: 14
              }
            },
            axisLine: { // 坐标轴轴线相关设置
              show: true,
              lineStyle: {
                color: '#999999'
              }
            },
            axisTick: { // 坐标轴刻度相关设置。
              show: true,
              alignWithLabel: true // 柱子与X轴刻度对齐
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            data: config.dataList,
            axisLine: { // 坐标轴轴线相关设置
              show: false, // 不显示Y轴线条
              lineStyle: {
                color: '#999999'
              }
            },
            axisLabel: {
              formatter: function (value) {
                value = value.toFixed(2)
                value = parseFloat(value)
                value = value.toLocaleString()
                return `￥${value}`
              },
              textStyle: {
                color: '#999999',
                fontSize: 14
              }
            },
            axisTick: { // 坐标轴刻度相关设置
              show: false
            },
            splitLine: { // 坐标在grid区域的分割线
              // show: true,
              lineStyle: {
                type: 'dashed'// 设置分割线样式（图标横线颜色）
              }
            }
          }
        ],
        series: seriesArr,
        color:colorArr
      })
    }
  }
}
</script>
<style scoped lang="scss">
.staffData {
  width: 100%;
  height: 500px;
}
</style>
